<template>
  <div class="header">
    <div class="system">
      <img src="@/assets/svg/logo.svg" style="object-fit: contain"/>
      <span>|</span>
      <div class="name" v-text="state.systemName"></div>
    </div>
    <BoardMenu></BoardMenu>
    <div class="right-header">
      <el-popover placement="bottom" popper-class="login-name" width="auto" trigger="hover">
        <template #reference>
          <div class="person">
            <el-image :src="state.userImg" fit="contain">
              <template #error>
                <div class="image-slot">
                  <em class="tbdfont tbd-touxiang"></em>
                </div>
              </template>
            </el-image>
            <div class="userName" v-text="state.userName"></div>
            <div class="set"><em class="tbdfont tbd-xiajiantou"></em></div>
          </div>
        </template>
        <div class="person-list">
          <div class="person-list-item" @click="loginOut">登出</div>
          <div class="person-list-item" @click="showAbout">关于</div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, reactive, getCurrentInstance} from "vue";
import {useRouter} from "vue-router"
import {useStore} from "vuex";
import showAboutFun from '../../../hooks/showAboutMan'
import BoardMenu from "./boardMenu.vue";
import ConfigMenu from "./configMenu.vue";
import { systemConfig } from '../../../../public/config'
import {loginApi} from '../../../http/login'
const router = useRouter();
const {getters} = useStore();
const {showAbout} = showAboutFun();
const { proxy } = getCurrentInstance()
const state = reactive({
  systemName: systemConfig.systemName,
  userImg:'',
  userName:computed(()=>getters['userMessage/getUserName'])
})
const loginOut = async(): Promise<void>=>{
  // proxy.$http.getLoginFun('login/logout').then(()=>{
    loginApi.loginOut().then(()=>{
    sessionStorage.removeItem('upmSessionId')
    //删除菜单
    sessionStorage.removeItem("boardMenu")
    router.push('/login') //跳转到登录
  }).catch(error =>{
    console.log(error) //登出失败
  })
}
</script>

<style scoped lang="scss">
.header {
  z-index: 10;
  height: pxTvh(48);
  @include elasticFN(space-between, center);
  box-shadow: inset 0px -1px 0px 0px rgba(0,0,0,0.1);
  padding: 0 pxTvw(32) 0 pxTvw(35);
  background: #0F121B;
  width: 100%;
  border: 1px solid rgba(126,169,255,0.2);
  box-sizing: border-box;
  &> .system {
    @include elasticFN(space-between, center);
    &> img{
      // @include imgSize(28.43);
      width: pxTvw(60);
      height: pxTvh(18);
    }
    &>span{
      margin: 0 pxTvw(8);
      color: #54667A;
      @include computed_font(24);
      height: pxTvh(23);
      line-height: pxTvh(23);
    }
    &> .name{
      @include computed_font(16);
      @include textHeight(30);
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      // margin-left: pxTvw(16);
    }
  }
  &> .right-header{
    display: flex;
    &> .person{
      @include elasticFN(space-between, center);
      &> .el-image{
        background-color: rgba(240, 242, 245, 1);
        border-radius: 50%;
        @include imgSize(30);
        .image-slot{
          color: #4E5D78;
          text-align: center;
          line-height: pxTvh(30);
          em{
            @include computed_font(20);
          }
        }
      }
      .userName{
        margin-right: pxTvw(8);
        margin-left: pxTvw(8);
        @include computed_font(14);
        @include textHeight(21);
        font-family: Source Han Sans CN-Bold, Source Han Sans CN,sans-serif;
        color: #E8F3FF;
      }
      .set{
        font-weight: 400;
        color: #979797;
        em{
          @include computed_font(8);
          @include cursorFN();
        }
      }
    }
  }
}
.login-name{
  .person-list{
      &-item{
        transition: all 200ms;
        padding: pxTvh(5) pxTvw(16);
        text-align: center;
        &:hover{
          //font-weight: bold;
          cursor: pointer;
        }
      }
    }
}
</style>
<style lang="scss">
//影响所有下拉框
.el-popper {
  --el-bg-color-overlay: rgb(22,49,86);
  --el-border-color-light: rgb(22,49,86);
  color: #E8F3FF;
}
.login-name{
  --el-text-color-regular: #E8F3FF;
  --el-bg-color-overlay:#102644;
  .person-list-item{
    &:hover{
      color: #6AA1FF;
    }
  }
}
</style>